<template>
    <el-dialog
      title="新增工单"
      width="630px"
      :visible="isShow"
      @close="closeFn"
    >
      <el-form
        ref="addForm"
        :rules="rules"
        :model="addForm"
        label-width="120px"
      >
        <el-form-item label="设备编号:" prop="innerCode">
          <el-input
            style="width: 85%"
            v-model="addForm.innerCode"
            @input="getOperatorList"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型:" prop="productType">
          <el-select
            style="width: 85%"
            v-model="addForm.productType"
            placeholder="请选择"
          >
           <template v-for="item in type">
             <el-option
              :key="item.typeId"
              v-if="type && type.length > 0 && item.typeId!==2"
              :label="item.typeName"
              :value="item.type"
            ></el-option>
           </template>
          </el-select>
        </el-form-item>
        <el-form-item label="运维人员:" prop="userId">
          <el-select
            style="width: 85%"
            v-model="addForm.userId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input
            style="width: 85%"
            type="textarea"
            :rows="4"
            placeholder="请输入备注（不超过40字）"
            maxlength="40"
            show-word-limit
            v-model="addForm.desc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <el-button
              class="btn cancel"
              @click="closeFn"
              style="margin-right: 20px"
              >取消</el-button
            >
            <el-button
              class="btn confirm"
              type="primary"
              @click="addSubmit"
              >确认</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
</template>

<script>
import {
  getTaskTypeApi,
  getOperatorPersonApi,
  getGoodsImportListApi,
  createTaskApi
} from "@/api/task";
export default {
  props: {
    isShow: Boolean,
  },
  data() {
    return {
      addForm: {
        assignorId:'',
        createType: 1,
        innerCode: "",
        userId: "",
        productType: "",
        desc: "",
        msg:'',
        details: [],
      },
      innerVisible: false,
      userList: [],
      type: [],
      importList: [],
      rules: {
        innerCode: [
          { required: true, message: "设备编号不得为空", trigger: "blur" },
        ],
        productType: [
          { required: true, message: "请选择工单类型", trigger: "change" },
        ],
        userId: [
          { required: true, message: "请选择运营人员", trigger: "change" },
        ],
        desc: [
          { required: true, message: "备注内容不得为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getTaskType();
  },
  methods: {
    // 获取工单类型
    async getTaskType() {
      const res = await getTaskTypeApi();
      this.type = [...res];
    },
    // 获取运维人员
    getOperatorList() {
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        const res = await getOperatorPersonApi(this.addForm.innerCode);
        this.userList = res;
        const res1 = await getGoodsImportListApi(this.addForm.innerCode);
        this.importList = [...res1];
        this.importList.forEach(item => {
          this.$set(item,'importCount',item.maxCapacity - item.currentCapacity)
        })
      }, 500);
      if (!this.addForm.innerCode) {
        this.userList = [];
      }
    },
    // 关闭弹窗
    closeFn() {
      this.$emit("update:isShow", false);
      this.$refs.addForm.resetFields()
      this.addForm = {
        assignorId:'',
        createType: 1,
        innerCode: "",
        userId: "",
        productType: "",
        desc: "",
        details: [],
      }
    },
    // 内层提交
    innerSubmit(){
      this.addForm.details = []
      this.importList.forEach(item => {
       if(item.sku){
         this.addForm.details.push({
          channelCode:item.channelCode,
          expectCapacity:item.importCount,
          skuId:item.sku.skuId,
          skuImage:item.sku.skuImage,
          skuName:item.sku.skuName
        })
       }
      })
      this.innerVisible = false
    },
    // 提交
    addSubmit(){
      this.$refs.addForm.validate(async pass=>{
        if(pass){
          this.addForm.assignorId = this.addForm.userId
          const res = await createTaskApi({...this.addForm})
          this.$message.success('工单创建成功')
          this.closeFn()
          this.$emit('searchTask')
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 80px;
  height: 36px;
  border: none;
  padding: 0;
  line-height: 36px;
}
.cancel {
  background-color: #fbf4f0;
  color: #7e7570;
}
.confirm {
  background-color: #ff6d29;
  color: #fff;
}
.el-icon-document {
  color: #5f84ff;
  cursor: pointer;
}

</style>
